<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <title>某某科技有限公司</title>
    <meta content="某某科技有限公司" name="keywords">
    <meta content="某某科技有限公司" name="description">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link href="images/favicon.ico" rel="shortcut icon">

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="css/photo.css" rel="stylesheet" type="text/css"/>

    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/r29/html5.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        .photo {
            margin: 20px 0 0 0;
            width: 98%;
            padding: 0;
        }

        .photo li {
            margin-bottom: 20px;
            text-align: center;
        }
    </style>

</head>
<body>
<ul class="photo list-unstyled" id="lightgallery">
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-01.jpg">
        <a href=""><img class="vcenter" src="images/pic-01.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-02.jpg">
        <a href=""><img src="images/pic-02.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-03.jpg">
        <a href=""><img src="images/pic-03.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-01.jpg">
        <a href=""><img class="vcenter" src="images/pic-01.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-02.jpg">
        <a href=""><img src="images/pic-02.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-03.jpg">
        <a href=""><img src="images/pic-03.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-01.jpg">
        <a href=""><img class="vcenter" src="images/pic-01.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-02.jpg">
        <a href=""><img src="images/pic-02.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-03.jpg">
        <a href=""><img src="images/pic-03.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-01.jpg">
        <a href=""><img class="vcenter" src="images/pic-01.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-02.jpg">
        <a href=""><img src="images/pic-02.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-03.jpg">
        <a href=""><img src="images/pic-03.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/banner3.jpg">
        <a href=""><img class="vcenter" src="images/banner3.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-01.jpg">
        <a href=""><img class="vcenter" src="images/pic-01.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-02.jpg">
        <a href=""><img src="images/pic-02.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-03.jpg">
        <a href=""><img src="images/pic-03.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-01.jpg">
        <a href=""><img class="vcenter" src="images/pic-01.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-02.jpg">
        <a href=""><img src="images/pic-02.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-03.jpg">
        <a href=""><img src="images/pic-03.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-01.jpg">
        <a href=""><img class="vcenter" src="images/pic-01.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-02.jpg">
        <a href=""><img src="images/pic-02.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-03.jpg">
        <a href=""><img src="images/pic-03.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-01.jpg">
        <a href=""><img class="vcenter" src="images/pic-01.jpg" width="100%"></a>
    </li>
    <li class="col-lg-2 col-md-3 col-sm-4 col-xs-6" data-src="images/pic-02.jpg">
        <a href=""><img src="images/pic-02.jpg" width="100%"></a>
    </li>
</ul>

<script charset="utf-8" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<!--瀑布流-->
<script charset="utf-8" src="js/masonry.pkgd.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('#lightgallery').masonry({
            itemSelector: 'li',
        });
    })
</script>

<!--相册-->
<script charset="utf-8" src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script charset="utf-8" src="js/lightgallery-all.min.js" type="text/javascript"></script>
<script charset="utf-8" src="js/lg-thumbnail.js" type="text/javascript"></script>
<script charset="utf-8" src="js/lg-fullscreen.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#lightgallery").lightGallery();
    });
</script>


</body>
</html>
